<template>
  <div id="vuepress-theme-blog__global-layout">
    <Header />
    <MobileHeader
      :is-open="isMobileHeaderOpen"
      @toggle-sidebar="isMobileHeaderOpen = !isMobileHeaderOpen"
    />
    <div
      class="content-wrapper"
      :class="$frontmatter.styleClass == 'index' ? 'transparent' : ''"
      @click="isMobileHeaderOpen = false"
    >
      <div class="site-page-title">{{ $frontmatter.title }}</div>
      <DefaultGlobalLayout />
      <Live2d />
    </div>

    <Footer />
  </div>
</template>

<script>
import Live2d from "@theme/components/Live2d/Live2d.vue";
import GlobalLayout from "@app/components/GlobalLayout.vue";
import Header from "@theme/components/Header.vue";
import MobileHeader from "@theme/components/MobileHeader.vue";
import Footer from "@theme/components/Footer.vue";

export default {
  components: {
    DefaultGlobalLayout: GlobalLayout,
    Header,
    MobileHeader,
    Footer,
    Live2d,
  },

  data() {
    return {
      isMobileHeaderOpen: false,
    };
  },

  mounted() {
    this.randomWallpaper();
    this.$router.afterEach(() => {
      this.randomWallpaper();
      this.isMobileHeaderOpen = false;
    });
  },
  updated() {},
  methods: {
    randomWallpaper() {
      //图片
      var wallpaper = [
        "girlwithNs.jpg",
        "catgirl.jpg",
        "catgirl2.jpg",
      ];
      let randomCount = Math.floor(Math.random() * wallpaper.length);
      const style = document.body.style;
      style.setProperty(
        "background-image",
        `url('/wallpaper/${wallpaper[randomCount]}')`
      );
    },
  },
};
</script>

<style lang="stylus">
body {
  background-attachment: fixed;
  background-size: cover;
}

#vuepress-theme-blog__global-layout {
  word-wrap: break-word;
  position: relative;
}

.content-wrapper.transparent {
  background: transparent;
  box-shadow: none;
  margin-top: 200px;
  min-height: $contentHeightIndex;
}

.content-wrapper {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: #999 0px 0px 10px;
  padding: 20px;
  min-height: $contentHeight;
  max-width: $contentWidth;
  margin: 300px auto 80px;
  position: relative;

  @media (max-width: $MQMobile) {
    & {
      padding: 100px 15px 20px 15px;
      min-height: calc(100vh - 20px - 61px - 100px);
    }
  }
}

.site-page-title {
  position: absolute;
  top: -130px;
  width: 100%;
  font-size: 30px;
  color: white;
  text-shadow: 0.1rem 0.1rem 0.2rem rgb(0 0 0 / 15%);
  text-align: center;
}
</style>
